<template>
    <el-dialog v-model="visible" :title="this.title" width="30%" :close-on-click-modal="false" :show-close="false" destroy-on-close>
        <p class="Message">{{ message }}</p>
        <p class="Jump">{{ timeText }}</p>
    </el-dialog>
</template>
<script>
import router from '@/router/index'
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'JumpDialog',
    isCustomElement: true,
    props: {
        message: String,
        pathName: String,
        pathNowName:{
            type:String,
            default:"",
        },
        time: {
            type: Number,
            default: 10,
        },
        title:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            visible:true,
            remainingTime: 0,
            timeText: '',
        }
    },
    methods: {
        countDown() {
            let timer = setInterval(() => {
                if (this.remainingTime > 1) {
                    this.remainingTime--
                    this.timeText = `你将在${this.remainingTime}秒后自动跳转`
                } else {
                    this.timeText = '跳转中'
                    clearInterval(timer)
                    this.visible=false
                    if(this.pathNowName===this.pathName){
                        router.go(0)
                    }
                    else{
                        router.push({ name: this.pathName })
                    }
                }
            }, 1000)
        },
    },
    mounted: function () {
        this.remainingTime = this.time;
        this.timeText = `你将在${this.remainingTime}秒后自动跳转`
        this.countDown()
    },
    
})
</script>